<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/lib.css">
<script src="../js/lib-all.js"></script>
<style>
body{TEXT-ALIGN: center;}
.c{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;}
/**显示列表*/
.col1line,.col2line{ width:840px; height:auto;overflow:auto; margin-top:15px; padding:8px; border:#CCC solid 1px;}
.col1line li{height:35px;line-height:34px;float:left;border-bottom: 1px dashed #CCCCCC; vertical-align:middle;}
.col1line li.tit{background:#EEE;width:30%;text-align:right; padding-right:5px; font-size:15px;}
.col1line li.info{width:68%; background:#FFF; text-align:left; padding-left:5px;}
.col2line li{ height:35px;line-height:34px;float:left;border-bottom: 1px dashed #CCCCCC;vertical-align:middle;}
.col2line li.tit{width:20%;background:#CCCCCC; text-align:right; padding-right:5px;}
.col2line li.info{height:35px;width:28%;background:#FFF; text-align:left; padding-left:5px;}
</style>
</head>
<body>
<div class="c">
<form>
  <ul class="col1line">
    <li class="tit">姓名</li>
	<li class="info"><input size="30" name="uname" dataType="Require" /></li>
    <li class="tit">年龄</li>
	<li class="info"><input size="30" name="age" dataType="Integer" /></li>
    <li class="tit">邮箱</li>
	<li class="info"><input size="30" name="email" dataType="Email" /></li>
    <li class="tit">手机</li>
	<li class="info"><input size="30" name="mobile" dataType="Mobile" require="false" /><i>可不填</i></li>
  </ul>
   <input type="submit" value="提交" />
 </form>
</div>
</body>

<script>
$(document).ready(function($){
  $('form').formValidator();
});
</script>
</html>


